<template>
    <div class="contion">
        <div class="pay">
            <div class="pay_1">
                <van-icon name="arrow-left" size="25" @click="back()" style="margin-left:5px"/>
                <span style="margin-left:250px"><b>结账</b></span>
            </div>
            <div class="pay_3">
                <div>
                    <div class="aa">
                        <div class="pay_3_1">
                            <van-icon name="location-o" size="20" style="color:#E44F32;margin:15px"/>
                        </div>
                        <div class="ser" style="color:#E44F32;">— — — — — — — —</div>
                    </div>
                    <div class="bb">地址</div>
                </div>
                <div>
                    <div class="aa">
                        <div class="pay_3_2">
                            <van-icon name="idcard" size="20" style="color:#E44F32;margin:15px"/>
                        </div>
                        <div class="ser">— — — — — — — —</div>
                    </div>
                    <div>付款方式</div>
                </div>
                <div>
                    <div class="pay_3_3">
                        <van-icon name="orders-o" size="20" style="margin:15px"/>
                    </div>
                    <div>订单结算</div>
                </div>
            </div>
            <div class="pay_2">
                <p>
                    <input type="radio" :id="`radio-1`" :value="1" v-model="radio1" @change="handleAddressSelect(1)" style="size:20px">
                    &nbsp;
                    <van-icon name="alipay" size="25"/> 支付宝
                </p>
                <p>
                    <input type="radio" :id="`radio-2`" :value="2" v-model="radio1" @change="handleAddressSelect(2)">
                    &nbsp;
                    <van-icon name="wechat-pay" size="25"/> 微信
                </p>
            </div>

            <div class="pay_4">
                <el-button @click="pay">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const back = () =>{
    router.back();
}

const radio1 = ref(null)

let typelist = ref([])

const getData = () =>{
    axios.get("http://127.0.0.1:8000/home/type/").then(res =>{
        typelist.value = res.data.data
    })
}

onMounted(()=>{
    getData()
})

const handleAddressSelect = (value) => {
  radio1.value = value;
  console.log(value);
};

const pay = () =>{
    if(radio1.value == null){
        ElMessage.error('请选择支付方式')
    }else{
        localStorage.setItem("paytype",radio1.value)
        router.push('/pay2')
    }
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.pay_1{
    width: 600px;
    height: 60px;
    font-size: 25px;
    padding-top: 20px;
    background-color: #FFFFFF;
}

.pay_3{
    display: flex;
    flex-direction: row;
    height: 100PX;
    background-color: #FFFFFF;
}

.aa{
    display: flex;
    flex-direction: row;
}

.pay_3_1{
    margin-left: 100px;
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.pay_3_2{
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#E44F320D;
}

.pay_3_3{
    width:50px;
    height:50px;
    border-radius: 15px;
    background-color:#9F9E9A0D;
}

.ser{
    margin-top: 20px;
    color:darkgray;
    font-size: 10px;
}

.bb{
    margin-left: 110px;
}

.pay_2{
    display: flex;
    flex-direction: column;
    font-size: 25px;
}

.pay_4 button{
    margin-top: 200px;
    margin-left: 100px;
    width: 400px;
    height: 60px;
    border: 1px solid #E44F32;
    background-color: #E44F32;
    font-size: 20px;
    color:#FFFFFF;
    border-radius: 15px;
    margin-bottom: 40px;
}

</style>